<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <title>二手房价格分析仪表盘</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="page-header">
      <h1>二手房价格影响因素分析与预测</h1>
      <p>基于 Python（pandas / scikit-learn / seaborn）和前端可视化的完整流程示例</p>
    </header>

    <main>
      <section class="card">
        <h2>数据概览</h2>
        <div class="grid">
          <div class="metric">
            <span class="metric-label">样本数量</span>
            <span id="record-count" class="metric-value">--</span>
          </div>
          <div class="metric">
            <span class="metric-label">位置类型</span>
            <span id="location-count" class="metric-value">--</span>
          </div>
        </div>
        <div class="chart-container">
          <canvas id="location-chart"></canvas>
        </div>
      </section>

      <section class="card">
        <h2>缺失值处理</h2>
        <div class="missing-values">
          <div>
            <h3>清洗前</h3>
            <ul id="missing-before"></ul>
          </div>
          <div>
            <h3>清洗后</h3>
            <ul id="missing-after"></ul>
          </div>
        </div>
      </section>

      <section class="card">
        <h2>核心统计指标</h2>
        <table>
          <thead>
            <tr>
              <th>特征</th>
              <th>平均值</th>
              <th>中位数</th>
              <th>标准差</th>
              <th>最小值</th>
              <th>最大值</th>
            </tr>
          </thead>
          <tbody id="stats-table"></tbody>
        </table>
      </section>

      <section class="card">
        <h2>线性回归模型表现</h2>
        <div class="grid">
          <div class="metric">
            <span class="metric-label">R^2 分数</span>
            <span id="r2-score" class="metric-value">--</span>
          </div>
          <div class="metric">
            <span class="metric-label">MAE (RMB)</span>
            <span id="mae" class="metric-value">--</span>
          </div>
          <div class="metric">
            <span class="metric-label">训练集</span>
            <span id="train-size" class="metric-value">--</span>
          </div>
          <div class="metric">
            <span class="metric-label">测试集</span>
            <span id="test-size" class="metric-value">--</span>
          </div>
        </div>
        <h3>预测示例</h3>
        <table>
          <thead>
            <tr>
              <th>面积 (㎡)</th>
              <th>真实价格 (RMB)</th>
              <th>预测价格 (RMB)</th>
            </tr>
          </thead>
          <tbody id="prediction-table"></tbody>
        </table>
      </section>

      <section class="card">
        <h2>可视化图表</h2>
        <div class="image-grid">
          <figure>
            <img src="../outputs/correlation_heatmap.png" alt="相关性热力图" />
            <figcaption>相关性热力图</figcaption>
          </figure>
          <figure>
            <img src="../outputs/area_vs_price.png" alt="面积与价格散点图" />
            <figcaption>面积与价格散点图</figcaption>
          </figure>
          <figure>
            <img
              src="../outputs/metro_distance_vs_price.png"
              alt="地铁距离与价格散点图"
            />
            <figcaption>地铁距离与价格散点图</figcaption>
          </figure>
          <figure>
            <img
              src="../outputs/predicted_vs_actual.png"
              alt="预测值与真实值对比"
            />
            <figcaption>预测值与真实值对比</figcaption>
          </figure>
        </div>
      </section>
    </main>

    <footer class="page-footer">
      <p>
        运行 <code>python analysis.py</code> 生成最新数据；然后在项目根目录执行
        <code>python -m http.server</code> 启动本地服务，访问
        <code>http://localhost:8000/web/</code> 查看仪表盘。
      </p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>
